{% extends "../base.html" %} <!-- 向上一级引用base.html -->

{% block content %}
  <div class="container-fluid p-5">
    <div class="row justify-content-center">
      <div class="col-md-8 text-center">
        <!-- 500 图标与标题 -->
        <div class="mb-5">
          <div class="d-inline-block p-4 rounded-circle bg-warning/10 text-warning mb-4">
            <i class="fa fa-server fa-5x"></i>
          </div>
          <h1 class="display-1 fw-bold text-secondary mb-2">500</h1>
          <h3 class="text-dark">服务器内部错误</h3>
        </div>

        <!-- 错误信息 -->
        <div class="bg-light p-5 rounded-lg mb-6">
          <p class="text-secondary mb-0">
            抱歉，服务器暂时出现故障，无法完成您的请求。<br>
            技术团队已收到通知，正在紧急修复中，请稍后再试。
          </p>
        </div>

        <!-- 操作按钮 -->
        <div class="d-flex justify-content-center gap-3">
          <a href="/dashboard" class="btn btn-primary px-5">
            <i class="fa fa-home me-2"></i>返回首页
          </a>
          <button class="btn btn-secondary px-5" onclick="location.reload()">
            <i class="fa fa-refresh me-2"></i>刷新页面
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 自定义动画样式 -->
  <style>
    @keyframes pulse {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
      100% {
        transform: scale(1);
      }
    }

    .fa-server {
      animation: pulse 3s ease-in-out infinite;
    }
  </style>
{% endblock %}